<template>
  <div>
    <div class="head">
      <img
        src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png"
        alt=""
      />
    </div>
    <div class="goodsList">
      <van-tabs
        v-model="activeName"
        title-active-color="#b4282d"
        line-height="0"
        @click="tabClick"
      >
        <van-tab title="综合" name="0"></van-tab>
        <van-tab name="1">
          <template #title
            >价格
            <img
              class="price"
              :src="
                order == ''
                  ? require('../../../assets/images/no.png')
                  : order == 'asc'
                  ? require('../../../assets/images/up.png')
                  : require('../../../assets/images/down.png')
              "
              alt=""
          /></template>
        </van-tab>
        <van-tab title="分类" name="2"></van-tab>
      </van-tabs>
      <ul>
        <li v-for="item in goodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <p>{{ item.name }}</p>
          <p>￥{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { goodsList } from "@/api/home/goods/index";
export default {
  data() {
    return {
      title: "",
      order: "",
      activeName: "0",
      goodsList: [], // 产品列表
    };
  },
  methods: {
    getList() {
      let isHot = this.$route.query.isHot;
      console.log("ishot:", isHot);
      let obj = {
        isHot: "",
        isNew: "",
        order: this.order,
      };

      if (isHot == "true") {
        obj.isHot = "1";
        this.title = "人气推荐";
      } else {
        obj.isNew = "1";
        this.title = "新品首发";
      }
      goodsList({
        ...obj,
      }).then((res) => {
        console.log("goodsList:", res);
        this.goodsList = res.data.data;
      });
    },
    tabClick(name) {
      console.log(name);
      if (name == "1") {
        this.order = this.order != "asc" ? "asc" : "desc";
      } else {
        this.order = "";
      }

      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
